<template>
	<view class="becomeVip">
		<view class="payList">
			<view class="payCount" :class="current==index?'bg':'unbg'" v-for="(item,index) in payList" :key="index"
				@click="changeTab(item,index)">
				<view class="title">
					妙妈管家
				</view>
				<text class="type">({{item.type}})</text>
				<view class="price">
					￥<text class="bold">{{item.price}}</text> {{item.cardType}}
				</view>
			</view>

		</view>
		<view class="payBtn" @click="createOrder">
			￥{{amount}}元去支付
		</view>
		<view class="rule" style="margin-left: 5%;">
			<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby">《妙妈管家会员协议》</uni-data-checkbox>
			<text class="ruleInfo" @click="goRuleFun">《妙妈管家会员协议》</text>
		</view>
		<text class="enjoy">尊享特权</text>
		<view class="tool">

			<view class="toolView" v-for="(item,index) in newServiceList" :key="index">
				<image :src="item.imgUrl" mode="heightFix">
				</image>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	const current = ref(-1)
	const newServiceList = ref([])
	const checkbox = ref(-1)
	const amount = ref()
	const level = ref()
	const hobby = ref([{
		text: '已阅读并同意',
		value: 0
	}])
	const payList = ref([{
			type: '优享版月卡',
			price: '30',
			level: 'yy',
			cardType: '元/月',
			imgUrl: '/static/common/选中会员底@3x.png',
			checkImgUrl: '/static/common/选中会员底@3x.png'
		},
		{
			type: '尊享版月卡',
			price: '30',
			level: 'jy',
			cardType: '元/月',
			imgUrl: '/static/common/选中会员底@3x.png',
			checkImgUrl: '/static/common/选中会员底@3x.png'
		},
		{
			type: '优享版年卡',
			price: '360',
			level: 'yn',
			cardType: '元/年',
			imgUrl: '/static/common/选中会员底@3x.png',
			checkImgUrl: '/static/common/选中会员底@3x.png'
		},
		{
			type: '尊享版年卡',
			price: '360',
			level: 'jn',
			cardType: '元/年',
			imgUrl: '/static/common/选中会员底@3x.png',
			checkImgUrl: '/static/common/选中会员底@3x.png'
		},

	])
	const serviceList = ref([{
			name: '日常保洁',
			imgUrl: '/static/common/日常保洁@3x.png'
		}, {
			name: '油烟机清洁',
			imgUrl: '/static/common/油烟机清洁@3x.png'
		}, {
			name: '冰箱清洁',
			imgUrl: '/static/common/冰箱清洁@3x.png'
		},
		//{
		// 	name: '空调清洁',
		// 	imgUrl: '/static/common/空调@3x.png'
		// }, {
		// 	name: '厨房深度清洁',
		// 	imgUrl: '/static/common/厨房@3x.png'
		// }, {
		// 	name: '洗衣机清洁',
		// 	imgUrl: '/static/common/洗衣机@3x.png'
		// }, {
		// 	name: '卫生间深度清洁',
		// 	imgUrl: '/static/common/卫生间@3x.png'
		// }, {
		// 	name: '专属客服',
		// 	imgUrl: '/static/common/客服@3x_1.png'
		// },
	])
	onLoad((options) => { //获取路由参数
		console.log(options.type)
		if (options.type) {
			current.value = Number(options.type)
		}
		if (options.type == 0) {
			newServiceList.value = serviceList.value.slice(0, 4);
			console.log(serviceList.value)
			amount.value =30
			level.value = yy
		} else if (options.type == 1) {
			newServiceList.value = serviceList.value.slice(0, 6);
			amount.value = 30
			level.value = jy
		} else if (options.type == 2) {
			newServiceList.value = serviceList.value;
			amount.value = 30
			level.value = by
		} else {
			newServiceList.value = serviceList.value;
			amount.value = 30
			level.value = zy
		}

	})
	const changeTab = (item, i) => {
		console.log(item)
		current.value = i
		amount.value = item.price
		level.value = item.level
		console.log(item.level)
		if (i == 0 || i == 4) {
			newServiceList.value = serviceList.value.slice(0, 4);
		} else if (i == 1 || i == 5) {
			newServiceList.value = serviceList.value.slice(0, 6);
		} else {
			newServiceList.value = serviceList.value
		}
		console.log(newServiceList.value)

	}
	const goRuleFun = () => {
		proxy.sjuNav.navigateTo('/my/vipRuleInfo')
	}
	const createOrder = () => {
		if (checkbox.value == -1) {
			proxy.sjuAlert.showError("请阅读并同意会员协议");
			return false;
		}

		proxy.sjuRequest.request("/api/weixin/order/createOrder/" + proxy.sjuConfig.appInfo.appId, 'post', {
			"openId": proxy.sjuLogin.getValue("miaoMaGJOpenid"),
			"addressId": amount.value,
			"couponValue": level.value
		}).then(res => {
			console.log(res)
			if (res.code == "200") {
				pay(res.data);
			} else {
				proxy.sjuAlert.showError("下单失败");
			}
		})
	}

	const pay = (orderId) => {
		console.log(proxy.sjuLogin.getValue("miaoMaGJOpenid"))
		console.log(orderId)
		proxy.sjuRequest.request("/api/weixin/order/createPay/" + proxy.sjuConfig.appInfo.appId + "/" + orderId,
			'post').then(res => {
			console.log(res)
			proxy.sjuPay.payWeixinH5(res.data, orderId);
			// proxy.sjuLogin.saveValue("payOrderId",res.data,orderId);


		})
	}
</script>

<style lang="scss" scoped>
	.becomeVip {
		width: 100%;
		height: 100%;
		// overflow-y: scroll;
		// background: linear-gradient(to bottom, #C6D4EE, #DFE5F1);
		padding: 20rpx;
		box-sizing: border-box;

		.payList {
			width: 100%;
			margin-top: 10rpx;
			// height: 300rpx;
			// background-color: var(--accent-bg-color);
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.payCount {
				width: 24%;
				margin: 0 0.5%;
				height: 29vw;
				margin-top: 20rpx;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #343434;
				line-height: 2;

				.title {
					font-size: 26rpx;
					font-weight: bold;

				}

				.type {
					font-size: 20rpx;
				}

				.price {
					font-size: 22rpx;
					color: #363636;
				}

				.bold {
					font-size: 28rpx;
					color: #363636;
				}
			}

			.bg {
				background: url('/static/common/选中会员底@3x.png')no-repeat;
				background-size: 100% 100%;
			}

			.unbg {
				background: url('/static/common/矩形@3x.png')no-repeat;
				background-size: 100% 100%;
			}

		}

		.payBtn {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-size: 36rpx;
			text-align: center;
			margin: 5% auto;
			border-radius: 30px;
			background: linear-gradient(to right,
					#F4DBB4,
					#EAB96A);
		}

		.rule {
			// display: flex;
			// flex-direction: row;
			// margin-right: auto;
			position: relative;

			.ruleInfo {
				position: absolute;
				top: 3px;
				left: 200rpx
			}
		}

		.enjoy {
			display: block;
			font-size: 36rpx;
			color: #2A0B00;
			font-weight: bold;
			margin-left: 4%;
			margin-top: 30rpx;

		}


		.tool {
			width: 100%;
			margin-top: 10rpx;
			height: 300rpx;
			// background-color: var(--accent-bg-color);
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;


			.toolView {
				width: 25%;
				height: 120rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 50px;
					border-radius: 50%;
				}

				.arrow {
					width: 30rpx;
					text-align: center;

					image {
						width: 100%;
					}
				}

				.iconfont {
					color: var(--primary-color);
					font-size: 80rpx;
				}

				text {
					display: block;
					color: $text-color;
					margin-top: 10rpx;
					font-size: 24rpx;
				}

			}
		}
	}
</style>